<template>
  <div class="data-container">
    <div id="echarts3"></div>
    <dv-decoration-3 class="decoration" />
  </div>
</template>
<script>
import echarts from 'echarts'
import { apiGlobalCountryCount } from '@/api/customer/index'
import '@/utils/china.js'
import worldJson from '@/utils/world.json'

export default {
  name: 'panel3',
  data() {
    return {
      myEcharts: '',
      dataList: [],
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    onInterval() {},
    // 获取数据
    getData() {
      apiGlobalCountryCount()
        .then((res) => {
          const { data } = res
          this.dataList = data
          this.initEcharts()
        })
        .catch(() => {
          this.$emit('stopInterval')
        })
    },
    randomData() {
      return Math.round(Math.random() * 500)
    },
    // 初始化图表
    initEcharts() {
      this.dataList.push({
        name: '索马里',
        hui_shou_num: 100,
        er_shou_num: 10000,
      })
      var echartsData1 = this.dataList.map((item) => {
        return {
          name: item.name,
          value: item.hui_shou_num,
        }
      })
      var echartsData2 = this.dataList.map((item) => {
        return {
          name: item.name,
          value: item.er_shou_num,
        }
      })
      // 索马里的地图染色有问题
      if (!echartsData1.find((item) => item.name === '索马里')) {
        echartsData1.push({
          name: '索马里',
          value: 0,
        })
      }
      if (!echartsData1.find((item) => item.name === '索马里')) {
        echartsData2.push({
          name: '索马里',
          value: 0,
        })
      }
      var max = this.handleMax(echartsData1)

      echarts.registerMap('World', worldJson)
      let nameMap = {
        Afghanistan: '阿富汗',
        Singapore: '新加坡',
        Angola: '安哥拉',
        Albania: '阿尔巴尼亚',
        'United Arab Emirates': '阿联酋',
        Argentina: '阿根廷',
        Armenia: '亚美尼亚',
        'French Southern and Antarctic Lands': '法属南半球和南极领地',
        Australia: '澳大利亚',
        Austria: '奥地利',
        Azerbaijan: '阿塞拜疆',
        Burundi: '布隆迪',
        Belgium: '比利时',
        Benin: '贝宁',
        'Burkina Faso': '布基纳法索',
        Bangladesh: '孟加拉国',
        Bulgaria: '保加利亚',
        'The Bahamas': '巴哈马',
        'Bosnia and Herzegovina': '波斯尼亚和黑塞哥维那',
        Belarus: '白俄罗斯',
        Belize: '伯利兹',
        Bermuda: '百慕大',
        Bolivia: '玻利维亚',
        Brazil: '巴西',
        Brunei: '文莱',
        Bhutan: '不丹',
        Botswana: '博茨瓦纳',
        'Central African Republic': '中非共和国',
        Canada: '加拿大',
        Switzerland: '瑞士',
        Chile: '智利',
        China: '中国',
        'Ivory Coast': '象牙海岸',
        Cameroon: '喀麦隆',
        'Democratic Republic of the Congo': '刚果民主共和国',
        'Republic of the Congo': '刚果共和国',
        Colombia: '哥伦比亚',
        'Costa Rica': '哥斯达黎加',
        Cuba: '古巴',
        'Northern Cyprus': '北塞浦路斯',
        Cyprus: '塞浦路斯',
        'Czech Republic': '捷克共和国',
        Germany: '德国',
        Djibouti: '吉布提',
        Denmark: '丹麦',
        'Dominican Republic': '多明尼加共和国',
        Algeria: '阿尔及利亚',
        Ecuador: '厄瓜多尔',
        Egypt: '埃及',
        Eritrea: '厄立特里亚',
        Spain: '西班牙',
        Estonia: '爱沙尼亚',
        Ethiopia: '埃塞俄比亚',
        Finland: '芬兰',
        Fiji: '斐',
        'Falkland Islands': '福克兰群岛',
        France: '法国',
        Gabon: '加蓬',
        'United Kingdom': '英国',
        Georgia: '格鲁吉亚',
        Ghana: '加纳',
        Guinea: '几内亚',
        Gambia: '冈比亚',
        'Guinea Bissau': '几内亚比绍',
        Greece: '希腊',
        Greenland: '格陵兰',
        Guatemala: '危地马拉',
        'French Guiana': '法属圭亚那',
        Guyana: '圭亚那',
        Honduras: '洪都拉斯',
        Croatia: '克罗地亚',
        Haiti: '海地',
        Hungary: '匈牙利',
        Indonesia: '印度尼西亚',
        India: '印度',
        Ireland: '爱尔兰',
        Iran: '伊朗',
        Iraq: '伊拉克',
        Iceland: '冰岛',
        Israel: '以色列',
        Italy: '意大利',
        Jamaica: '牙买加',
        Jordan: '约旦',
        Japan: '日本',
        Kazakhstan: '哈萨克斯坦',
        Kenya: '肯尼亚',
        Kyrgyzstan: '吉尔吉斯斯坦',
        Cambodia: '柬埔寨',
        Kosovo: '科索沃',
        Kuwait: '科威特',
        Laos: '老挝',
        Lebanon: '黎巴嫩',
        Liberia: '利比里亚',
        Libya: '利比亚',
        'Sri Lanka': '斯里兰卡',
        Lesotho: '莱索托',
        Lithuania: '立陶宛',
        Luxembourg: '卢森堡',
        Latvia: '拉脱维亚',
        Morocco: '摩洛哥',
        Moldova: '摩尔多瓦',
        Madagascar: '马达加斯加',
        Mexico: '墨西哥',
        Macedonia: '马其顿',
        Mali: '马里',
        Myanmar: '缅甸',
        Montenegro: '黑山',
        Mongolia: '蒙古',
        Mozambique: '莫桑比克',
        Mauritania: '毛里塔尼亚',
        Malawi: '马拉维',
        Malaysia: '马来西亚',
        Namibia: '纳米比亚',
        'New Caledonia': '新喀里多尼亚',
        Niger: '尼日尔',
        Nigeria: '尼日利亚',
        Nicaragua: '尼加拉瓜',
        Netherlands: '荷兰',
        Norway: '挪威',
        Nepal: '尼泊尔',
        'New Zealand': '新西兰',
        Oman: '阿曼',
        Pakistan: '巴基斯坦',
        Panama: '巴拿马',
        Peru: '秘鲁',
        Philippines: '菲律宾',
        'Papua New Guinea': '巴布亚新几内亚',
        Poland: '波兰',
        'Puerto Rico': '波多黎各',
        'North Korea': '北朝鲜',
        Portugal: '葡萄牙',
        Paraguay: '巴拉圭',
        Qatar: '卡塔尔',
        Romania: '罗马尼亚',
        Russia: '俄罗斯',
        Rwanda: '卢旺达',
        'Western Sahara': '西撒哈拉',
        'Saudi Arabia': '沙特阿拉伯',
        Sudan: '苏丹',
        'South Sudan': '南苏丹',
        Senegal: '塞内加尔',
        'Solomon Islands': '所罗门群岛',
        'Sierra Leone': '塞拉利昂',
        'El Salvador': '萨尔瓦多',
        Somaliland: '索马里兰',
        Somalia: '索马里',
        'Republic of Serbia': '塞尔维亚',
        Suriname: '苏里南',
        Slovakia: '斯洛伐克',
        Slovenia: '斯洛文尼亚',
        Sweden: '瑞典',
        Swaziland: '斯威士兰',
        Syria: '叙利亚',
        Chad: '乍得',
        Togo: '多哥',
        Thailand: '泰国',
        Tajikistan: '塔吉克斯坦',
        Turkmenistan: '土库曼斯坦',
        'East Timor': '东帝汶',
        'Trinidad and Tobago': '特里尼达和多巴哥',
        Tunisia: '突尼斯',
        Turkey: '土耳其',
        'United Republic of Tanzania': '坦桑尼亚',
        Uganda: '乌干达',
        Ukraine: '乌克兰',
        Uruguay: '乌拉圭',
        'United States': '美国',
        Uzbekistan: '乌兹别克斯坦',
        Venezuela: '委内瑞拉',
        Vietnam: '越南',
        Vanuatu: '瓦努阿图',
        'West Bank': '西岸',
        Yemen: '也门',
        'South Africa': '南非',
        Zambia: '赞比亚',
        Korea: '韩国',
        Tanzania: '坦桑尼亚',
        Zimbabwe: '津巴布韦',
        Congo: '刚果',
        'Central African Rep.': '中非',
        Serbia: '塞尔维亚',
        'Bosnia and Herz.': '波黑',
        'Czech Rep.': '捷克',
        'W. Sahara': '西撒哈拉',
        'Lao PDR': '老挝',
        'Dem.Rep.Korea': '朝鲜',
        'Falkland Is.': '福克兰群岛',
        'Timor-Leste': '东帝汶',
        'Solomon Is.': '所罗门群岛',
        Palestine: '巴勒斯坦',
        'N. Cyprus': '北塞浦路斯',
        Aland: '奥兰群岛',
        'Fr. S. Antarctic Lands': '法属南半球和南极陆地',
        Mauritius: '毛里求斯',
        Comoros: '科摩罗',
        'Eq. Guinea': '赤道几内亚',
        'Guinea-Bissau': '几内亚比绍',
        'Dominican Rep.': '多米尼加',
        'Saint Lucia': '圣卢西亚',
        Dominica: '多米尼克',
        'Antigua and Barb.': '安提瓜和巴布达',
        'U.S. Virgin Is.': '美国原始岛屿',
        Montserrat: '蒙塞拉特',
        Grenada: '格林纳达',
        Barbados: '巴巴多斯',
        Samoa: '萨摩亚',
        Bahamas: '巴哈马',
        'Cayman Is.': '开曼群岛',
        'Faeroe Is.': '法罗群岛',
        'IsIe of Man': '马恩岛',
        Malta: '马耳他共和国',
        Jersey: '泽西',
        'Cape Verde': '佛得角共和国',
        'Turks and Caicos Is.': '特克斯和凯科斯群岛',
        'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
      }

      this.myEcharts = echarts.init(document.getElementById('echarts3'))
      var option = {
        legend: {
          top: '2%',
          textStyle: {
            color: '#ffffff',
          },
        },
        color: ['#68cee0', '#eedd78'],
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            var res = params.name + '<br/>'
            var myseries = option.series
            for (var i = 0; i < myseries.length; i++) {
              for (var j = 0; j < myseries[i].data.length; j++) {
                if (myseries[i].data[j].name == params.name) {
                  res += myseries[i].name + ' : ' + myseries[i].data[j].value + '</br>'
                }
              }
            }
            return res
          },
        },
        // geo: {
        //   map: 'World',
        //   zoom: 1.21, // 设置比例比sesies的大，出现外围地图叠加效果
        //   emphasis: {
        //     // 高亮状态下的多边形和标签样式
        //     disabled: true,
        //   },

        //   itemStyle: {
        //     // 图形样式
        //     areaColor: 'rgba(0, 0, 0, 0)',
        //     borderWidth: 2,
        //     borderColor: '#68cee0',
        //   },
        // },
        visualMap: {
          min: 0,
          max,
          inRange: {
            color: ['rgba(0, 0, 0, 0)', '#274d68'], //控制颜色渐变的范围
          },
          calculable: true, //出现滑块
          bottom: '5%',
          textStyle: {
            color: '#ffffff',
          },
        },
        series: [
          {
            name: '回收',
            zoom: 1, // 设置比例比sesies的大，出现外围地图叠加效果
            type: 'map',
            mapType: 'World',
            label: {
              show: false,
              color: '#fff',
            },
            itemStyle: {
              // 图形样式
              areaColor: 'rgab(0, 0, 0, 0)',
              borderWidth: 1,
              borderColor: '#68cee0',
              shadowColor: 'rgba(255, 255, 255, 0.5)',
              shadowBlur: 10,
            },
            emphasis: {
              // 高亮状态下的多边形和标签样式
              label: {
                show: true,
                color: '#fff',
              },
              itemStyle: {
                areaColor: 'rgba(255, 255, 255, 0.4)',
                borderWidth: 2,
                borderColor: '#ffffff',
              },
            },
            data: echartsData1,
            nameMap: nameMap,
          },
          {
            name: '二手设备',
            zoom: 1, // 设置比例比sesies的大，出现外围地图叠加效果
            type: 'map',
            mapType: 'World',
            label: {
              show: false,
              color: '#fff',
            },
            itemStyle: {
              // 图形样式
              areaColor: 'rgab(0, 0, 0, 0)',
              borderWidth: 1,
              borderColor: '#68cee0',
              shadowColor: 'rgba(255, 255, 255, 0.5)',
              shadowBlur: 10,
            },
            emphasis: {
              // 高亮状态下的多边形和标签样式
              label: {
                show: true,
                color: '#fff',
              },
              itemStyle: {
                areaColor: 'rgba(255, 255, 255, 0.4)',
                borderWidth: 2,
                borderColor: '#ffffff',
              },
            },
            data: echartsData2,
            nameMap: nameMap,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myEcharts.clear() // 清空画布
      setTimeout(() => {
        this.myEcharts.setOption(option)
      }, 100)
      this.myEcharts.on('click', (param) => {
        this.$emit('click', param)
      })
    },
    // 计算地图的最大值
    handleMax(list) {
      let max = 0,
        temp = 0,
        count = 0
      max = temp = list.sort((a, b) => {
        return b.value - a.value
      })[10].value

      do {
        temp = temp / 10
        count++
      } while (temp > 1)
      return parseInt(max / Math.pow(10, count - 1)) * Math.pow(10, count - 1)
    },
    onResize() {
      if (this.myEcharts) {
        this.myEcharts.resize()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);

.title {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}
.data-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  position: relative;
}
.filter-box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #ffffff;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    .label {
      margin-right: 10px;
    }
  }
}

#echarts3 {
  width: 100%;
  height: 100%;
}

::v-deep .el-select .el-input__inner {
  background: $mainColorOpcity;
  width: 200px;
  margin-right: 4px;
  color: #ffffff;
  height: 30px;
}
::v-deep .el-input__icon {
  line-height: 30px !important;
}

.decoration {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 250px;
  height: 30px;
}
</style>
